/*
 * Copyright ©
 * #  子节点组件
 * @author: zw
 * @date: 2021-09-04 
 */


import { defineComponent, ref } from 'vue'
import './css/SubMenuItem.scss'
export default defineComponent({
  name: 'SubMenuItem',
  setup(props, { emit, slots }) {
    const subMenuShow = ref(false);
    function showSubMenu() {
      subMenuShow.value = true;
    }
    function hideSubMenu() {
      subMenuShow.value = false;
    }
    return () => {
      return (
        <div class='sub-menu-item'
          onmouseenter={showSubMenu}
          onmouseleave={hideSubMenu}
        >
          <div class="title">
            {slots.title?.()}
            <span class="icon">&gt;</span>
          </div>
          <div class="sub-item" v-show={subMenuShow.value}>
            {slots.default?.()}
          </div>
        </div>
      )
    }
  }
})
